import React, { useEffect } from "react";
import axios from "axios";
// 5.引入useSelector获取store中的state，引入useDispatch派发action给相应reducer
import { useSelector, useDispatch } from "react-redux";
// 6.引入所需的action构造器

// 引入标题栏
import Header from "../../../../components/Header/Header";
import SearchList from "../../../../components/SearchList/SearchList";
import GrandList from "../../../../components/GrandList/GrandList";
// 引入自定义样式
import "./CMgrand.sass";
// 引入数据样式
function getListInf({ currentPage, pageSize }) {
  axios({
    url: "http://43.142.177.141:8080/sys/commodity/queryAllBrand",
    method: "get",
    params: { currentPage, pageSize },
  }).then((res) => {
    console.log("回调", res);
  });
}

export default function CMgrand() {
  const { currentPage, pageSize, listInf } = useSelector((state) => {
    return state.grandInform;
  });
  // useEffect() 是一个钩子函数，需要一个函数作为参数
  // 这个作为参数的函数，将会在组件渲染完毕后执行
  // 在会产生副作用的代码放在其中
  useEffect(() => {
    getListInf({});
  });
  useEffect(() => {});
  return (
    <div className="showArea">
      {/* 1 标题栏 */}
      <div className="firstNav">
        <Header secondTitle={"品牌管理"} />
      </div>
      {/* 2  搜索框 */}
      <div className="secondSearch">
        <SearchList
          searchCriteriaInf={[
            { criteriaNames: "品牌名", inputOrSelect: true, selectOptions: [] },
          ]}
        />
      </div>
      {/* 3 数据列表 */}
      <div className="thirdTable">
        <GrandList
          listInf={listInf}
          currentPage={currentPage}
          pageSize={pageSize}
        />
      </div>
    </div>
  );
}
